import classNames from 'classnames'
import AMap from '@/components/AMap'
import Sparkline from '@/components/Sparkline'

function WeatherItem({ item, ...props }: any, key: number) {
  if (item.loading) {
    return (
      <li key={key} className={classNames('my-4 w-full h-40 flex justify-center items-center text-gray-500', props.className)}>
        正在加载...
      </li>
    )
  }

  return (
    <li key={key} className={classNames('grid grid-cols-4 gap-4 my-4 rounded-md px-4', props.className)}>
      <span
        className="text-center"
        style={{
          height: '200px',
          padding: '16px 0',
        }}>
        <AMap id={`amap-${item.name}`} lat={item.coord.lat} lng={item.coord.lon} name={item.name} />
        <div className=" text-green-500">{item.name}</div>
      </span>
      <span className="text-center py-4">
        <Sparkline data={item.temp} color="orange" label="℃" />
      </span>
      <span className="text-center py-4">
        <Sparkline data={item.pressure} color="green" label="hPa" />
      </span>
      <span className="text-center py-4">
        <Sparkline data={item.humidity} color="gray" label="%" />
      </span>
    </li>
  )
}

export default WeatherItem
